<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>历史聊天记录回放</title>

</head>
<body>
    <div>
        <h2>历史聊天记录回放</h2>
        <div class="msgList">
        </div>
    </div>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>
    <script th:inline="javascript"> var ctx = [[@{/}]]; var captchaType = [[${captchaType}]]; </script>
    <script>

        // 获取URL参数
        function getQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }

        // 调用函数获取userId
        var userId = getQueryString("id");
        var datas={
            'chatSessionid':userId,
        };
        console.log(JSON.stringify(datas))
        $(document).ready(function () {
            $.ajax({
                type: "post",
                url: ctx + "system/chat/list?chatSessionId="+userId,
                data: datas,
                dataType: 'json',
                success: function(result) {
                    if(result.code=='0'){
                        var msgArr=JSON.parse(result.rows[0].chatContent);
                        console.log(msgArr)
                        for(let i=0;i<msgArr.length;i++){
                            // console.log(msgArr[i]);
                            if(msgArr[i].my==true){
                                //用户说话
                                let msgCon="<div class='myMsg'><div className='robtMsg'>"+msgArr[i].msg+"</div> <img  src='https://img2.baidu.com/it/u=3364209226,879706576&fm=253&fmt=auto&app=138&f=JPEG'></div>"
                                $('.msgList').append(msgCon)
                            }else{
                                //系统说话
                                if(msgArr[i].questionList&&msgArr[i].questionList.length>0){
                                    var msgs="<div>"+msgArr[i].msg+"</div>";
                                    for(let j=0;j<msgArr[i].questionList.length;j++){
                                        if(msgArr[i].questionList[j].qContent){
                                            let qCons="<div>"+msgArr[i].questionList[j].qContent+"</div>"
                                            msgs=msgs+qCons
                                        }else  if(msgArr[i].questionList[j].q2SubContent){
                                            let qCons="<div>"+msgArr[i].questionList[j].q2SubContent+"</div>"
                                            msgs=msgs+qCons
                                        }
                                    }
                                    let msgCons="<div class='xtMsg'> <img  src='http://kefu.csyytx.cn/static/image/robt.png'><div className='robtMsg'>"+msgs+"</div></div>"
                                    $('.msgList').append(msgCons)
                                }else{
                                    let msgCons="<div class='xtMsg'> <img  src='http://kefu.csyytx.cn/static/image/robt.png'><div className='robtMsg'>"+msgArr[i].msg+"</div></div>"
                                    $('.msgList').append(msgCons)
                                }
                            }
                        }
                    }
                },
            });
        })
    </script>
    <style>
        .robtMsg{
            background-color: rgb(249, 249, 249);
            border-radius: 17px;
            padding: 8px 10px;
            margin-left: 10px;
        }
        .msgList{
            padding: 10px 20px;
            height: auto;
        }
        .msgList img{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin: 0 10px;
        }
        .myMsg{
            display: flex;justify-content: end;
            align-items: center;
            padding-left: 20%;
            margin-top: 10px;
        }
        .xtMsg{
            display: flex;
            align-items: center;
            padding-right: 20%;
            margin-top: 10px;
        }
    </style>
</body>
</html>